<!DOCTYPE html>
<html>

<head>
    <title>
        <%- title -%>
    </title>
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/findPwd.css">
</head>

<body>
    <div class="box">
        <div class="logo-wrapper">
            <div>
                <img src="/img/logou.png" alt="商城logo">
            </div>
        </div>
        <div class="find-pwd">
            <div class="step">
                <ul>
                    <li class="step-one li-act">
                        <span class="step-finish">1</span> 填写邮箱
                    </li>
                    <li class="step-two">
                        <span>2</span> 验证身份
                    </li>
                    <li class="step-three">
                        <span>3</span> 设置新密码
                    </li>
                </ul>
            </div>
            <div class="input-content">
                <div class="step1">
                    <%- include('findPwd/step1') -%>
                </div>
                <div class="step2">
                    <%- include('findPwd/step2') -%>
                </div>
                <div class="step3">
                    <%- include('findPwd/step3') -%>
                </div>
            </div>
        </div>
    </div>
    <div class="overlay">
        <div class="overlay-content">
            <p class="suss-tip">恭喜您，您已成功设置新密码。</p>
            <div class="re-login">重新登陆</div>
        </div>
    </div>

    <script src="/js/jquery-1.11.1.js"></script>
    <script>
        $(function() {
            // 获取验证码
            function getCode() {
                $.ajax({
                        url: '/createdyzm',
                        type: 'GET'
                    })
                    .done(res => {
                        $('.yanzm').text(res.data)
                    })
                    .fail(err => {
                        console.log(err)
                    })
            }
            getCode();

            // 文本框失去焦点
            $('input').on('change', function() {
                var mail = $.trim($(this).val());
                var qqMail = $.trim($('.text-mail').val());
                var pwd1 = $.trim($('.pwd1').val());
                $(this).val(mail);
                var reg = /^([a-zA-Z]|[0-9])+@qq.com$/;
                var regPwd = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{5,19}$/;
                if (mail === qqMail) {
                    if (reg.test(mail)) {
                        $(this).parent().css('border', '1px solid #ccc');
                        $('.msg-mail').hide();
                    } else {
                        $(this).parent().css('border', '1px solid red');
                        $('.msg-mail').show();
                    }
                } else if (mail === pwd1) {
                    if (regPwd.test(pwd1)) {
                        $(this).parent().css('border', '1px solid #ccc');
                        $('.msg-mail').hide();
                    } else {
                        $(this).parent().css('border', '1px solid red');
                        $('.msg-mail').show();
                    }
                }

            })

            // 点击刷新验证码
            $('.freshYzm').on('click', function() {
                getCode();
            })

            // step1 点击下一步
            $('.btn1').on('click', function() {
                var userMail = $('.text-mail').val();
                var yzm = $('.text-yzm').val();
                var reg = /^([a-zA-Z]|[0-9])+@qq.com$/;
                if (!reg.test(userMail)) {
                    return false;
                }
                if (!userMail && !yzm) {
                    $('.msg-mail').text('请填写QQ邮箱').show().siblings().css('border', '1px solid red');
                    $('.msg-yzm').text('请填写验证码').show().siblings().children('.text-yzm').css('border', '1px solid red');
                } else if (!userMail) {
                    $('.msg-mail').text('请填写QQ邮箱').show().siblings().css('border', '1px solid red');
                } else if (!yzm) {
                    $('.msg-yzm').text('请填写验证码');
                } else {
                    $.ajax({
                            url: '/testyzm',
                            type: 'POST',
                            data: {
                                mail: userMail,
                                yzm: yzm
                            }
                        })
                        .done((res) => {
                            if (res.state === 205) {
                                $('.msg-mail').text(res.msg).show();
                            } else if (res.state === 404) {
                                $('.msg-yzm').text(res.msg).show();
                            } else {
                                $('.step-two').addClass('li-act').children('span').addClass('step-finish').parent()
                                    .siblings().removeClass('li-act').children('span').removeClass('step-finish');
                                $('.step2').show().siblings().hide();
                                $('.step-one span').text('✔');
                                $('.user-mail').text(userMail);
                            }
                        })
                        .fail((err) => {
                            console.log(err)
                        })
                }
            })

            // step2 获取验证码按钮鼠标划入效果切换
            function getCodeBtn() {
                $('.get-mail-code').hover(function() {
                    $(this).addClass('mail-hover');
                }).mouseout(function() {
                    $(this).removeClass("mail-hover");
                })
            }
            getCodeBtn();

            // step2 获取验证码
            $('.get-mail-code').on('click', function(e) {
                var _this = this;
                var userMail = $('.user-mail').text();
                $.ajax({
                        url: '/getcode',
                        type: 'GET',
                        data: {
                            mail: userMail
                        }
                    })
                    .done(function(res) {
                        var time = 120;
                        if (res.state === 1) {
                            var timer = setInterval(() => {
                                time--;
                                $(_this).text('(' + time + ')秒后重新发送');
                                if (time === 0) {
                                    clearInterval(timer);
                                    $('.get-mail-code').text('重新发送验证码');
                                    $(_this).attr('disabled', false).css('cursor', 'pointer');
                                    getCodeBtn();
                                } else {
                                    $(_this).unbind("mouseenter").unbind("mouseleave").attr('disabled', true).css('cursor', 'not-allowed');
                                }
                            }, 1000);
                        }
                    })
                    .fail(function(err) {
                        console.log(err)
                    })
            })

            // step2 点击下一步
            $('.btn2').on('click', function() {
                var textCode = $.trim($('.text-mail-code').val());
                $.ajax({
                        url: '/checkCode',
                        type: 'POST',
                        data: {
                            codeNum: textCode
                        }
                    })
                    .done(res => {
                        console.log(res)
                        if (res.state === 1) {
                            $('.step-three').addClass('li-act').children('span').addClass('step-finish').parent()
                                .siblings().removeClass('li-act').children('span').removeClass('step-finish');
                            $('.step3').show().siblings().hide();
                            $('.step-two span').text('✔');
                        } else {
                            alert(res.msg + '请重新刷新页面再试一次');
                        }
                    })
                    .fail(err => {
                        console.log(err)
                    })
            })

            // step3 两次密码验证
            $('.pwd2').on('change', function() {
                var pwd1 = $.trim($('.pwd1').val());
                var pwd2 = $.trim($('.pwd2').val());
                if (pwd1 === pwd2) {
                    $(this).parent().css('border', '1px solid #ccc');
                    $('.msg-pwd').hide();
                } else {
                    $(this).parent().css('border', '1px solid red');
                    $('.msg-pwd').show();
                }
            })

            // step3 点击完成
            $('.btn3').on('click', function() {
                var _this = this;
                var userMail = $('.user-mail').text();
                var userPwd = $.trim($('.pwd2').val());
                $.ajax({
                        url: '/subpwd',
                        type: 'POST',
                        data: {
                            user: userMail,
                            pwd: userPwd
                        }
                    })
                    .done(res => {
                        if (res.state === 1) {
                            console.log(res)
                            var time = 4;
                            setTimeout(() => {
                                $('.overlay').show();
                            }, 1000);
                            setInterval(() => {
                                time--;
                                $('.re-login').text((time) + '秒后请重新登录');
                                if (time === 0) {
                                    location.href = '/users/login';
                                }
                            }, 1000);
                        } else {
                            console.log('失败')
                        }
                    })
                    .fail(err => {
                        console.log(err)
                    })
            })
        })
    </script>
</body>

</html>